<template>
  <!-- 车辆信息选择  处理后端返回数据为树形菜单  并且只传入id  回显在自己查询 -->
  <el-cascader
    v-if="props.type === 'Select'"
    v-model="value"
    :options="carList"
  />
  <span v-else-if="props.type === 'Text'"> {{ value }}</span>
</template>
<script setup>
import { ref, computed, getCurrentInstance, onMounted } from "vue";
import { getCarModels } from "./components/index.js";
const { proxy } = getCurrentInstance();
const emits = defineEmits(["update:modelValue"]);
const carList = ref([]);
const list = ref([]);
onMounted(() => {
  proxy.$get({ url: "/CarInfo/car" }).then((res) => {
    list.value = res;
    carList.value = getCarModels(res);
  });
});

const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
  // Select 选择框 Text 文本
  type: {
    type: String,
    default: "Select",
  },
});
const value = computed({
  get: () => {
    const item = list.value.find((x) => {
      return x.id === props.modelValue;
    });
    if (item && props.type === "Select") {
      return [item.brand, item.series, props.modelValue];
    } else if (item && props.type === "Text") {
      return `${item.brand} ${item.series} ${item.model}`;
    } else if (props.type === "Select") {
      return [];
    } else if (props.type === "Text") {
      return "";
    }
  },
  set: (data) => {
    if (data && data.length > 0 && props.type === "Select") {
      emits("update:modelValue", data[data.length - 1]);
    } else if (props.type === "Select") {
      emits("update:modelValue", []);
    } else if (props.type === "Text") {
      emits("update:modelValue", "");
    }
  },
});
</script>